<template>
  <div>ref函数（定义data变量）</div>
  <ul>
    <li>{{ count }}</li>
    <li>{{ show }}</li>
    <li @click="change">隐藏显示盒子</li>
    <li v-for="item in list" :key="item">{{ item }}</li>
    <button @click="add">增加按钮</button>
    <hr />
    <div v-if="show" class="box"></div>
  </ul>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    // 1.定义一个变量
    const count = ref(0)
    // 2.定义方法
    const show = ref(true)
    const change = () => {
      show.value = !show.value
    }
    // 3.复杂类型 数组
    const list = ref([1, 2, 3])
    const add = () => {
      list.value.push(Math.random() * 10)
    }
    return { count, show, change, list, add }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 200px;
  width: 200px;
  background-color: pink;
}
</style>
